<template lang="html">
  <div class="check" v-loading="loadinga">
    <div class="breadNav">
      <el-breadcrumb separator="/" class="">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>业务查询</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="checkMenu">
      <div class="checkHead">
        <el-form ref="form" :model="form" :inline="true">
          <el-form-item label="时间范围">
            <el-col :span="11">
              <el-date-picker type="date" format="yyyy-MM-dd" placeholder="选择开始日期" v-model="form.startdate" style="width: 100%;" @change="startdateChange"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align:center">-</el-col>
            <el-col :span="11">
              <el-date-picker type="date" format="yyyy-MM-dd" placeholder="选择结束日期" v-model="form.enddate" style="width: 100%;" @change="enddateChange"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item label="诉求编号">
            <el-input v-model="form.apnum" placeholder="请输入诉求编号" style="width:180px"></el-input>
          </el-form-item>
          <el-form-item label="供热卡号">
            <el-input v-model="form.apcard" placeholder="请输入供热卡号" style="width:180px"></el-input>
          </el-form-item>
          <el-form-item label="诉求地址">
            <el-input v-model="form.apaddress" placeholder="请输入诉求地址" style="width:180px"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item label="诉求来源">
            <el-select v-model="form.aporigin" placeholder="请选择来源" style="width:180px">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="诉求状态">
            <el-select v-model="form.apstatus" placeholder="请选择状态" style="width:180px">
              <el-option label="待办" value="-2"></el-option>
              <el-option label="待处理" value="0"></el-option>
              <el-option label="处理中" value="-3"></el-option>
              <el-option label="待回访" value="4"></el-option>
              <el-option label="已结束" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务类型">
            <el-select v-model="form.apitem" placeholder="请选择服务类型" style="width:180px" v-on:change="selectItem()">
              <el-option v-for="item in itemlist" v-bind:value="item" :key="item" >{{item}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务项目">
            <el-select v-model="form.aptype" placeholder="请选择服务项目" style="width:180px">
            <el-option v-for="type in typelist" v-bind:value="type" :key="type" >{{type}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="诉求级别">
            <el-select v-model="form.aplevel" placeholder="请选择级别" style="width:180px">
              <el-option label="紧急" value="2"></el-option>
              <el-option label="重要" value="1"></el-option>
              <el-option label="一般" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">开始查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="holdmenu" v-loading="loading">
    <template>
    <el-table ref="multipleTable" :data="tableData4" border max-height="500" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="来源" prop="RecordOrigin">
        <template scope="scope">
       <span>{{scope.row.sounce}}</span>
     </template>
      </el-table-column>
      <el-table-column prop="State" label="状态" width="100">
        <template scope="scope">
          <div v-if="scope.row.State == 0">待处理</div>
          <div v-if="scope.row.State < 4 && scope.row.State >= 1">处理中</div>
          <div v-if="scope.row.State == 4">待回访</div>
          <div v-if="scope.row.State == 5">已结束</div>
       </template>
      </el-table-column>
      <el-table-column prop="Type" label="服务类型" show-overflow-tooltip width="100">
      </el-table-column>
      <el-table-column prop="Item" label="服务项目" show-overflow-tooltip width="100">
      </el-table-column>
      <el-table-column prop="AppealNum" label="诉求单号" show-overflow-tooltip width="170">
      </el-table-column>
      <el-table-column prop="AppealContent" label="描述">
        <template scope="scope">
          <div class="holddes">{{ scope.row.AppealContent }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="AddTime" label="时间" show-overflow-tooltip width="100">
      </el-table-column>
      <el-table-column prop="Level" label="级别" width="100">
        <template scope="scope">
        <div v-if="scope.row.Level == 0">一般</div>
        <div v-if="scope.row.Level == 1">重要</div>
        <div v-if="scope.row.Level == 2">紧急</div>
     </template>
      </el-table-column>
      <el-table-column prop="OutTime" label="超时时间" width="100">
        <template scope="scope">
        <div v-if="scope.row.OutTime == 0">未超时</div>
        <div v-if="scope.row.OutTime == 1">即将超时</div>
        <div v-if="scope.row.OutTime == 2">已超时</div>
     </template>
      </el-table-column>
      <el-table-column prop="work" label="操作"  width="100">
        <template scope="scope">
          <el-button type="text" size="small" @click="urge(scope.row)" v-if="custype == 1 || custype == 3">催办</el-button>
          <el-button type="text" size="small" @click="examine(scope.row)" v-if="custype == 3">审核</el-button>
          <el-button type="text" size="small" @click="feedback(scope.row)" v-if="custype == 1 || custype == 0">反馈</el-button>
     </template>
      </el-table-column>
    </el-table>
    </template>
    <div style="margin:20px 0 50px 0;overflow:hidden">
    <el-pagination
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page="currentPage4"
     :page-sizes="[10, 15, 20]"
     :page-size="row"
     layout="total, sizes, prev, pager, next, jumper"
     :total="total" style="float:right;margin-top:5px">
    </el-pagination>
    </div>
    </div>
    </div>
    </template>
    </div>

  </div>
</template>
<script>
export default {
  name: 'check',
  props: [
    'user',
    'custype'
  ],
  data() {
    return {
      form: {
        name: '',
        region: '',
        startdate: '',
        enddate: '',
        apnum:'',
        apcard:'',
        apaddress:'',
        aporigin:'',
        apstatus:'',
        apitem:'',
        aptype:'',
        aplevel:''
      },
      currentPage4: 1,
      tableData4: [],
      multipleSelection: [],
      loading: false,
      page: 1,
      row: 10,
      total: 0,
      company: '',
      reguserid:0,
      RecordOrigin:'',
      loadinga: false,
      itemlist:[],
      typelist:[],
      appData:[]
    }
  },
  methods: {
    startdateChange(val){
      this.form.startdate = val
    },
    enddateChange(val){
      this.form.enddate = val
    },
    onSubmit() {
      this.gethold()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) { //val每页条数
      this.row = val;
      this.gethold()
    },
    handleCurrentChange(val) {  //val页码
      this.page = val;
      this.gethold()
    },
    filterTag(value, row) {
      return row.sounce === value;
    },
    selectItem(){
      const _this = this;
      for(var i=0;i<_this.appData.length;i++){
        $.each(_this.appData[i],function(k,v){
          if(k == _this.form.apitem){
            _this.typelist = v;
            _this.form.aptype = v[0]
          }
        })
      }
    },
    getservicetype(){
      var data = {
        method:'servicetype',
        origin:'WarmAppealService',
        company:this.company
      }
      this.loadinga = true
      const _this = this;
      this.post('http://www.eheat.com.cn/handler/coreservice.ashx',data,function(r){
        _this.loadinga = false;
        _this.appData = r.Data;
        for(var i=0;i<r.Data.length;i++){
          $.each(r.Data[i],function(k,v){
            _this.itemlist.push(k)
          })
        }

      })
    },
    gethold() {
      var data = {
        method: 'WebAppealListEx',
        RowCount: this.row,
        company: this.company,
        origin: 'WarmAppealService',
        PageNum: this.page,
        RegUserID_User:-1,
        RegUserID_Auditor:-1,
        AppealType:this.form.apstatus,
        RecordOrigin:this.form.RecordOrigin,
        FirstAppealType:this.form.apitem,
        SecondAppealType:this.form.aptype,
        Status:this.form.apstatus,
        Cardnum:this.form.apcard,
        Level:this.form.aplevel,
        Address:this.form.apaddress,
        AppealBillNum:this.form.apnum,
        begintime:this.form.startdate,
        endtime:this.form.enddate
      }
      this.loading = true
      const _this = this;
      this.post(this.jholdUrl, data, function(res) {
        _this.loading = false
        if (res.Data != null) {
          _this.tableData4 = res.Data.Data
          _this.total = res.Data.RecordCount
        }else{
          _this.tableData4 = []
          _this.total = 0
        }
      })
    },
    urge(row){ //催办
      var data = {
        method:'UrgeAppeal',
        origin: 'WarmAppealService',
        company:this.company,
        reguserid:this.reguserid,
        operator:this.user,
        custype:0,  //this.custype
        appealbillnum:row.AppealNum
      }
      const _this = this;
      this.post(this.jholdUrl, data, function(res) {
        if(res.Result == 0){
          _this.$message({
             message: '工单'+row.AppealNum+'催办成功',
             type: 'success'
           });
        }
      })
    },
    examine(row){ //审核
      localStorage.appealinfo = JSON.stringify(row)
      this.$router.push('/examine')
    },
    feedback(row){ //反馈
      localStorage.appealinfo = JSON.stringify(row)
      this.$router.push('/feedback')
    }
  },
  created() {
    let info = JSON.parse(localStorage.loginInfo);
    this.company = info.company
    this.getservicetype()
  }
}
</script>

<style lang="css">
.checkMenu{
  padding:0 20px 20px 20px;
  overflow: hidden;
}
.checkHead{
  padding: 20px 20px 0 20px;
  background: #fff;
  border: 1px solid #dfe6ec
}
</style>
